
#tb{
    border: solid 1px black;
    border-collapse: collapse;
}




.cell{
    width: 20px;
    height: 20px;
    border: solid 1px black;
    background-size: 100% 100%;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}



.cell[state="normal"]{
    background-image: url(blank.png);
}

.cell[state="flag"]{
    background-image: url(flag.png);
}
.cell[state="bomb"]{
    background-image: url(boom_ex.png);
}

.cell[state="bombex"]{
    background-image: url(boom_ex.png);
}
.cell[state="bombpl"]{
    background-image: url(boom_plain.png);
}
.cell[state="b0"]{
    background-image: none;
}
.cell[state="b1"]::before{
    content: "1";
    color:blue;
}
.cell[state="b2"]::before{
    content: "2";
    color:green;
}
.cell[state="b3"]::before{
    content: "3";
    color:red;
}
.cell[state="b4"]::before{
    content: "4";
    color:yellow;
}
.cell[state="b5"]::before{
    content: "5";
    color:cyan;
}
.cell[state="b6"]::before{
    content: "6";
    color:pink;
}
.cell[state="b7"]::before{
    content: "7";
    color:orangered;
}
.cell[state="b8"]::before{
    content: "8";
    color:purple;
}
